<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打地鼠游戏</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="holes">
        <div class="hole">
            <img src="img/mouse.png" alt="" class="mouse">
            <img src="img/boom.png" alt="" class="boom">
        </div>
        <div class="hole">
            <img src="img/mouse.png" alt="" class="mouse">
            <img src="img/boom.png" alt="" class="boom">
        </div>
        <div class="hole">
            <img src="img/mouse.png" alt="" class="mouse">
            <img src="img/boom.png" alt="" class="boom">
        </div>
        <div class="hole">
            <img src="img/mouse.png" alt="" class="mouse">
            <img src="img/boom.png" alt="" class="boom">
        </div>
        <div class="hole">
            <img src="img/mouse.png" alt="" class="mouse">
            <img src="img/boom.png" alt="" class="boom">
        </div>
        <div class="hole">
            <img src="img/mouse.png" alt="" class="mouse">
            <img src="img/boom.png" alt="" class="boom">
        </div>
        <div class="hole">
            <img src="img/mouse.png" alt="" class="mouse">
            <img src="img/boom.png" alt="" class="boom">
        </div>
        <div class="hole">
            <img src="img/mouse.png" alt="" class="mouse">
            <img src="img/boom.png" alt="" class="boom">
        </div>
		<span>当前得分：</span><span class="value">0</span>
    </div>

    <script>
        let mouse = document.querySelectorAll(".mouse");
		let boom=document.querySelectorAll(".boom");
		let value=document.querySelector(".value");
		let num=0;
        function displayMouse() {
            let siteNum = Math.floor(Math.random()*8);
            mouse[siteNum].style.display="block";
        }
        setInterval(displayMouse, 1000);
        for (let i = 0; i < mouse.length; i++) {
            mouse[i].addEventListener("click", function () {
				if(this.style.display=="block"){
					mouse[i].style.display="none";
					boom[i].style.display="block";
					num++;
					value.textContent=num;
				}
                let that = this;
                setTimeout(function () {
                    that.nextElementSibling.style.display = "none";
                }, 1000)
            })
        }
    </script>

</body>

<html>